<!DOCTYPE HTML>
<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>LiveInYouth - 聆青</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="Free HTML5 Website Template by FreeHTML5.co" />
	<meta name="keywords" content="free website templates, free html5, free template, free bootstrap, free website template, html5, css3, mobile first, responsive" />
	<!-- 浏览器标签图标 facicon.ico -->
	<link rel="icon" href="/LiveInYouth/favicon.ico" type="image/x-icon" />  
	<!-- //浏览器标签图标 facicon.ico -->
  	<!-- Facebook and Twitter integration -->
	<meta name="twitter:title" content="" />
	<meta name="twitter:image" content="" />
	<meta name="twitter:url" content="" />
	<meta name="twitter:card" content="" />
	
	
	<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Music Profile Widget Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
		function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //for-mobile-apps -->

<!-- jplayer style -->
<link href="/LiveInYouth/player/css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- web-fonts -->
<link href='fonts/googleapis-fonts/fonts.css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
<!-- //web-fonts -->

<!-- jplayer相关css -->
<link href="/LiveInYouth/player/css/jplayer.blue.monday.min.css" rel="stylesheet" type="text/css" />
	
	
	
	<!-- google fonts -->
	<link href='fonts/googleapis-fonts/fonts.css?family=Work+Sans:400,300,600,400italic,700' rel='stylesheet' type='text/css'>
	<!-- Animate.css -->
	<link rel="stylesheet" href="css/animate.css">
	<!-- Icomoon Icon Fonts-->
	<link rel="stylesheet" href="css/icomoon.css">
	<!-- Bootstrap  -->
	<link rel="stylesheet" href="css/bootstrap.css">

	<!-- Magnific Popup -->
	<link rel="stylesheet" href="css/magnific-popup.css">

	<!-- Theme style  -->
	<link rel="stylesheet" href="css/style.css">

	<!-- Modernizr JS -->
	<script src="js/modernizr-2.6.2.min.js"></script>
	<!-- FOR IE9 below -->
	<!--[if lt IE 9]>
	<script src="js/respond.min.js"></script>
	<![endif]-->

	</head>
	
	
	<!-- 私人电台模块 -->
	<body>
		
	<div class="fh5co-loader"></div>
	
	<div id="page">
	<nav class="fh5co-nav" role="navigation">
		<div class="container">
			<div class="row">
				<div class="col-xs-2">
					<div id="fh5co-logo"><a href="main.html">LiveInYouth.</a></div>
				</div>
				<div class="col-xs-10 text-right menu-1">
					<!-- 无序列表 -->
					<ul>
						<!-- active类所在的列表元素会加亮强调 -->
						<li><a href="main.html">发现音乐</a></li>
						<li><a href="work.html">发现歌单</a></li>
						<!-- 砍掉发现故事
						<li><a href="story.html">发现故事</a></li>
						 -->
						<li class="active"><a href="fm.html">私人电台</a></li>
						<li>
						<!-- <li class="has-dropdown active"> -->
							<a href="services.html">我的聆青</a>
							<!-- 暂时砍掉
							<ul class="dropdown">
								<li><a href="#">个人主页</a></li>
								<li><a href="#">我的歌单</a></li>
								<li><a href="#">我的故事</a></li>
								<li><a href="#">退出登录</a></li>
							</ul>
							 -->
						</li>
						<li><a href="about.html">关于聆青</a></li>
					</ul>
				</div>
			</div>
		</div>
	</nav>
	
	<!-- 头面背景 -->
	<header id="fh5co-header" class="fh5co-cover fh5co-cover-sm" role="banner" style="background-image:url();">
		<!-- 遮罩层，只是定义了一个范围的样式，container与其没有从属关系 -->
		<div class="overlay"></div>
		<div class="container">
			<div class="row">
				<div class="col-md-8 col-md-offset-2 text-center">
					<div class="display-t">
						<div class="display-tc animate-box" data-animate-effect="fadeIn">
							<h1>私人电台</h1>
							<h2>Private <a href="fm.html" target="_blank">FM</a></h2>
						</div>
					</div>
				</div>
			</div>
		</div>
	</header>
	
<a href="listPos" class="hidden"></a>	
<!-- jplayer组件 -->
<div id="1" class="audio-main w3ls" style="background-image:url();">
	<div id="fh5co-portfolio">
			<div class="row animate-box">
				<div class="col-md-8 col-md-offset-2 text-center fh5co-heading">
					<!-- 歌单名 -->
					<!-- <h2 id="listName">♪ - 聆</h2> -->
					<h2 id="listName">♪ - </h2>
					<!-- 歌单介绍 -->
					<!-- <p id="listIntro">小梦大半</p> -->
					<p id="listIntro"></p>
					<!-- 点赞 -->
					<span class="love"><a href="#"><i class="icon-heart"></i></a></span>
					<span class="love"><a href="#"><i class="icon-heart2 hidden"></i></a></span>
				</div>
			</div>
	
	<div class="audio-record-list">
	<div class="profile">
			 <div class="profile-top wthree">
				 <div class="pic-sec">
					 <div class="pic">
					 	<!-- 用户头像 -->
					 	<!-- <img id="usreAvatar" src="/LiveInYouth/images/avatar/person1.jpg" alt=""/> -->
						 <img id="usreAvatar" src="" alt=""/>
					 </div>
					 <div class="pic_info">
					 	<!-- 用户名 -->
					 	<!-- <h2 id="userName">眼聆</h2> -->
						 <h2 id="userName"></h2>
					 </div>
					 <div class="clear"></div>
				 </div>
				 <!-- jPlayer动态、关注、粉丝模块
				 <div class="media">
					 <div class="tweet">
						 <h4>2,501</h4>
						 <h5>动态</h5>
					 </div>
					 <div class="follow">
						 <h4>158</h4>
						 <h5>关注</h5>
					 </div>
					 <div class="follow2">
						  <h4>25,850</h4>
						 <h5>粉丝</h5>
					 </div>
					 <div class="clear"></div>
				 </div>
				  -->
			 </div>
		 </div>
					<div id="jquery_jplayer_1" class="jp-jplayer"></div>
						<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
							<div class="jp-type-playlist">
								<div class="jp-gui jp-interface">
									<div class="jp-controls">	
										<button class="jp-play" role="button" tabindex="0">play</button>
									</div>
									<div class="jp-progress">
										<div class="jp-seek-bar">
											<div class="jp-play-bar"></div>
										</div>
									</div>
									<div class="jp-volume-controls">
										<button class="jp-mute" role="button" tabindex="0">mute</button>
										<button class="jp-volume-max" role="button" tabindex="0">max volume</button>
										<div class="jp-volume-bar">
											<div class="jp-volume-bar-value"></div>
										</div>
									</div>
									<div class="jp-time-holder">
										<div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
										<div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
									</div>
									
								</div>
								<div class="jp-playlist">
									<ul>
										<li>&nbsp;</li>
									</ul>
								</div>
								<div class="jp-no-solution">
									<span>Update Required</span>
									To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
								</div>
							</div>
						</div>
	</div>
	
	<div class="footer agile">
		<div class="copy-right">
			<p>LiveInYouth</p>
		</div>
	</div>
	
	</div>
</div>
<!-- //jplayer组件 -->	
	
	
	<!-- 底部 -->
	<footer id="fh5co-footer" role="contentinfo">
		<div class="container">
			<div class="row row-pb-md">
				<div class="col-md-4 fh5co-widget">
					<h3>LiveInYouth - 聆青</h3>
					<p>历经青年互动科技有限公司是一个新型的互联网公司，它通过一个泛社区化的感觉分享网站——聆青网，专注于向15-30岁的青年以及30-50岁的泛青年群体提供一个感觉分享的互联网平台。</p>
					<p><a href="/LiveInYouth/main/about.html">关于 聆青</a></p>
				</div>
				<div class="col-md-2 col-sm-4 col-xs-6 col-md-push-1">
					<ul class="fh5co-footer-links">
						<li><a href="http://www.w3school.com.cn">W3School</a></li>
						<li><a href="http://www.runoob.com/">Runoob</a></li>
						<li><a href="http://www.iteye.com/">ITeye</a></li>
						<li><a href="http://www.jb51.net/">Jb51</a></li>
						<li><a href="http://freehtml5.co">FreeHtml5</a></li>
					</ul>
				</div>

				<div class="col-md-2 col-sm-4 col-xs-6 col-md-push-1">
					<ul class="fh5co-footer-links">
						<li><a href="https://leetcode.com/">LeetCode</a></li>
						<li><a href="http://stackoverflow.com/">StackOverFlow</a></li>
						<li><a href="https://www.v2ex.com/">v2ex</a></li>
						<li><a href="https://git.oschina.net/">OsChina</a></li>
					</ul>
				</div>

				<div class="col-md-2 col-sm-4 col-xs-6 col-md-push-1">
					<ul class="fh5co-footer-links">
						<li><a href="http://weibo.com/ixenos">Weibo</a></li>
						<li><a href="http://www.cnblogs.com/ixenos/">Cnblogs</a></li>
						<li><a href="https://www.zhihu.com/people/ixenos/">Zhihu</a></li>
						<li><a href="https://github.com/ixenos">GitHub</a></li>
					</ul>
				</div>
			</div>

			<div class="row copyright">
				<div class="col-md-12 text-center">
					<p>
						<small class="block">&copy; 2017 LiveInYouth. All Rights Reserved.</small><br />
						<a href="http://github.com/ixenos/" target="_blank">历经青年公司</a> 版权所有 
					</p>
				</div>
			</div>

		</div>
	</footer>
	<!-- //底部 -->
	
	</div>

	<div class="gototop js-top">
		<a href="#" class="js-gotop"><i class="icon-arrow-up"></i></a>
	</div>
	
	<!-- jQuery -->
	<script src="js/jquery.min.js"></script>
	<!-- jQuery Easing -->
	<script src="js/jquery.easing.1.3.js"></script>
	<!-- Bootstrap -->
	<script src="js/bootstrap.min.js"></script>
	<!-- Waypoints -->
	<script src="js/jquery.waypoints.min.js"></script>
	<!-- countTo -->
	<script src="js/jquery.countTo.js"></script>
	<!-- Magnific Popup -->
	<script src="js/jquery.magnific-popup.min.js"></script>
	<script src="js/magnific-popup-options.js"></script>
	<!-- Main -->
	<script src="js/main.js"></script>
	
	<!-- fm启动检测js -->
	<script type="text/javascript" src="/LiveInYouth/player/js/jquery.jplayer.min.js"></script>
	<script type="text/javascript" src="/LiveInYouth/player/js/jplayer.playlist.min.js"></script>
	<script src="/LiveInYouth/util/js/cookie/js.cookie-2.1.4.min.js"></script>
	<script type="text/javascript">
	$(function(){
		//var url = window.location.href;//完整url
		var param = window.location.search;//url参数，无参数时，获取到空白字符串""，有参数时，连同?一起获取
		
		var serviceUrl = "/LiveInYouth/PrivateFM";//服务URL
		
		if(param != ""){
			/*
				url带参数时，进行一次url过滤，只关注需要的参数，不理会用户自己添加的内容 
			*/
			if(param.indexOf("?songListId=") == -1){//indexOf返回片段字符串在总字符串中的索引，找不到时返回-1
				alert("非法URL参数");
				return;
			}
			serviceUrl += param;
			/*
				根据id来加载歌单歌曲列表、歌单封面、歌单介绍、歌单名、用户名、头像
			*/
			$.ajax({
				cache : true , //具有幂等性的GET才能使用cache，POST不符合幂等性，所以cache没有意义
				type : "GET",
				url : serviceUrl,
				data : "type=otherList", 
				async : true,
				success : function(data) {
					 /*
					 	json接口：
					 	{
					 	    "success": "true",
					 	    "listId": "1",
					 	    "listName": "",
					 	    "listIntro": "",
					 	    "userId": "",
					 	    "userName": "",
					 	    "userAvatar": "",
					 	    "jPlayerDatas": [
					 	        {
					 	            "title": "",
					 	            "mp3": ""
					 	        },
					 	        {
					 	            "title": "",
					 	            "mp3": ""
					 	        },
					 	        {
					 	            "title": "",
					 	            "mp3": ""
					 	        }
					 	    ]
					 	}

					 */
					if(data.success == "true"){
						love(data.listId);//点赞
						
						$("#listName").text("♪ - " + data.listName);//歌单名
						$("#listIntro").text(data.listIntro);//歌单介绍
						$("#usreAvatar").attr("src", data.userAvatar);//用户头像
						$("#userName").text(data.userName);//用户名
						/*
							歌单列表
						*/
						/* 直接在后台打包好jPlayerData
						var jPlayerData = new Array();
						var songs = data.songs;
						//构造player数据
						for(int i=0; i<songs.length; i++){
							jPlayerData[i].title = songs[i].songName;
							jPlayerData[i].mp3 = song[i].songSrc;
						}*/
						
						//初始化player
						new jPlayerPlaylist(
							{
								jPlayer: "#jquery_jplayer_1",
								cssSelectorAncestor: "#jp_container_1"
							},
							data.jPlayerDatas, //歌单列表数据
							{
								swfPath: "../../dist/jplayer",
								supplied: "mp3, oga", //支持的文件格式，而且这是先后顺序 
								wmode: "window",
								useStateClassSkin: true,
								autoBlur: false,
								smoothPlayBar: true,
								keyEnabled: true
						});
					}
				}
			});
			console.log("加载对应songListId的歌单");//TODO
		}else{
			/*
				正常点击（URL不带参数时）
			*/
			//检测是否已登录，否则加载songListId为1的歌单
			var loginFlag = Cookies.get("userName");
			if(loginFlag == undefined){
				/*
					未登录，加载songListId为1的
				*/
				serviceUrl += "?songListId=1";
				/*
					根据id来加载歌单歌曲列表、歌单封面、歌单介绍、歌单名、用户名、头像
				*/
				$.ajax({
					cache : true , //具有幂等性的GET才能使用cache，POST不符合幂等性，所以cache没有意义
					type : "GET",
					url : serviceUrl,
					data : "type=otherList", 
					async : true,
					success : function(data) {
						if(data.success == "true"){
							$("#listName").text("♪ - " + data.listName);//歌单名
							$("#listIntro").text(data.listIntro);//歌单介绍
							$("#usreAvatar").attr("src", data.userAvatar);//用户头像
							$("#userName").text(data.userName);//用户名
							/*
								歌单列表
							*/
							//初始化player
							new jPlayerPlaylist(
								{
									jPlayer: "#jquery_jplayer_1",
									cssSelectorAncestor: "#jp_container_1"
								},
								data.jPlayerDatas, //歌单列表数据
								{
									swfPath: "../../dist/jplayer",
									supplied: "mp3, oga", //支持的文件格式，而且这是先后顺序 
									wmode: "window",
									useStateClassSkin: true,
									autoBlur: false,
									smoothPlayBar: true,
									keyEnabled: true
							});
						}
					}
				});
				console.log("未登录，默认加载songListId为1的歌单");//TODO
			}else{
				/*
					已登录,异步加载本用户的songList
				*/
				$.ajax({
					cache : true , //具有幂等性的GET才能使用cache，POST不符合幂等性，所以cache没有意义
					type : "GET",
					url : serviceUrl,
					data : "type=userList", 
					async : true,
					success : function(data) {
						if(data.success == "true"){
							love(data.listId);//点赞
							
							$("#listName").text("♪ - " + data.listName);//歌单名
							$("#listIntro").text(data.listIntro);//歌单介绍
							$("#usreAvatar").attr("src", data.userAvatar);//用户头像
							$("#userName").text(data.userName);//用户名
							/*
								歌单列表
							*/
							//初始化player
							new jPlayerPlaylist(
								{
									jPlayer: "#jquery_jplayer_1",
									cssSelectorAncestor: "#jp_container_1"
								},
								data.jPlayerDatas, //歌单列表数据
								{
									swfPath: "../../dist/jplayer",
									supplied: "mp3, oga", //支持的文件格式，而且这是先后顺序 
									wmode: "window",
									useStateClassSkin: true,
									autoBlur: false,
									smoothPlayBar: true,
									keyEnabled: true
							});
						}
					}
				});
				console.log("已登录，加载本用户songListId的歌单");//TODO
			}
		}
	});
	</script>
	<!-- //fm启动检测js -->
	
<!-- 重载收藏独立处理js -->
<script type="text/javascript">
function love(songListId){
	/*
		改装点赞独立处理JS	
	
		取消get的默认跳转，且简要地禁止重复点击（bug:刷新重新计算）
	*/
	var anchor = $("span[class='love']").children("a");//取子锚点
	var href = "/LiveInYouth/Collect?type=listColl&songListId=" + songListId;//填充评论的赞地址
	/*
		点击事件定制
	*/
	var flag = true;//点赞次数限制标志，顺便做强制刷新的盲锚点（页面找不到，则跳转当前位置） 
	$(anchor).click(function(event){
		event.preventDefault();//禁止click默认事件，从而防止下面get请求页面跳转
		/*
		 	登录状态判断
		*/
		var loginFlag = Cookies.get("userName");
		if(loginFlag == undefined){
			//alert("请登录后再收藏，即将跳转登录页面");
			if(window.confirm("未登录无法收藏，是否跳转登录页面？")){ //可选择的alert
				window.location = "/LiveInYouth";
			}
		} else {
			if(flag){
				$.ajax({
					cache : false , //开启缓存，下个ajax会从缓存中读数据，除非url重写（cache:false就是给url加上时间戳来不缓存请求的）
					type : "GET", //具有幂等性的GET才能使用cache，POST不符合幂等性，所以cache没有意义
					url : href,
					success : function(data) {
						/*
							根据返回参数做出响应
						*/
						if(data.success == "true"){
							$(".icon-heart").get(0).classList.add("hidden");
							$(".icon-heart2").get(0).classList.remove("hidden");
							alert("收藏成功");
						}else if(data.success == "false"){
							if(data.type == "hasColl"){
								$(".icon-heart").get(0).classList.add("hidden");
								$(".icon-heart2").get(0).classList.remove("hidden");
								alert("已收藏");
							}else if(data.type == "fail"){
								alert("收藏失败");
							}else if(data.type == "notLogin"){
								if(window.confirm("未登录无法收藏，当前系非法更改前端数据")){ //可选择的alert 
									window.location = "/LiveInYouth";
								}
							}
						}else{
							alert("后台参数异常");
						}
						window.location = "/LiveInYouth/main/fm.html#" + flag;//收藏后保持在当前位置,后面是什么不重要，只要是当前元素的元素就好
						flag = false;//限制当前点赞次数，最重要还是要在后台限制（弄一个赞表？）
					}
				});
			}else{
				//前端轻量级的重复点击限制 
				alert("已收藏");
				window.location = "/LiveInYouth/main/fm.html#" + flag;//收藏后保持在当前位置,后面是什么不重要，只要是当前元素的元素就好
			}
		}			
	});
}
</script>
<!-- //重载收藏独立处理js -->
	
	<!-- 播放列表js
	<script type="text/javascript" src="/LiveInYouth/player/js/jquery.jplayer.min.js"></script>
	<script type="text/javascript" src="/LiveInYouth/player/js/jplayer.playlist.min.js"></script>
	<script type="text/javascript">
	//<![CDATA[
	$(document).ready(function(){
		//可以把这部分放在ajax的success回调，第三个参数就是回调的数据（对象数组）
		new jPlayerPlaylist({
			jPlayer: "#jquery_jplayer_1",
			cssSelectorAncestor: "#jp_container_1"
		}, [
		    
			{
				title:"虚拟",
				mp3:"/LiveInYouth/audio/mp3/陈粒 - 虚拟.mp3"
			},
			{
				title:"Lismore",
				mp3:"http://www.jplayer.org/audio/mp3/Miaow-04-Lismore.mp3",
			},
			{
				title:"The Separation",
				mp3:"http://www.jplayer.org/audio/mp3/Miaow-05-The-separation.mp3",
			},
			{
				title:"放空",
				mp3:"/LiveInYouth/audio/mp3/范晓萱 - 放空.mp3"
			}
			
		], {
			swfPath: "../../dist/jplayer",
			supplied: "mp3, oga", //支持的文件格式，而且这是先后顺序 
			wmode: "window",
			useStateClassSkin: true,
			autoBlur: false,
			smoothPlayBar: true,
			keyEnabled: true
		});
	});
	//]]>
	</script>
	<!-- //播放列表js -->

	
	
	</body>
</html>

